<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入  初始化样式 字体图标 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/iconfont.css">

    <!-- 引入jq -->
    <script src="./static/js/jquery/jquery.js"></script>


    <!-- mui css 与js -->
    <link rel="stylesheet" href="./static/js/mui/css/mui.css">




    <script src="./static/js/mui/js/mui.min.js"></script>


    <!-- 引入rem js  -->
    <script src="./static/js/rem/rem.js"></script>




    <link rel="stylesheet" href="./js/search/search.css">

    <style>



    </style>
</head>

<body>






    <header class="mui-bar mui-bar-nav" id="header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">search页面</h1>
    </header>

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="#tabbar">
            <!-- mui-icon -->
            <span class="  mui-icon  iconfont  icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-chat">
            <span class="mui-icon   iconfont  icon-shop "></span>
            <span class="mui-tab-label">商城</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-contact">
            <span class="mui-icon    iconfont icon-trophy "></span>
            <span class="mui-tab-label">生活服务</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-map">
            <span class="mui-icon   iconfont  icon-team"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>



    <div class="mui-content">
        <!-- 内容区域 -->

        <div class="hotSearchBox">
            <h2>热门搜索</h2>
            <ul class="hotSearchULBox">
                
                <!-- <li>
                    <a href="">
                        <span>回龙观6</span>
                    </a>
                </li> -->
            </ul>


        </div>



        <hr>

        <div class="historySeachBox">
            <h2>历史搜索</h2>
            <button type="button" class="mui-btn mui-btn-danger  myBtn">历史搜索</button>
            <ul class="mui-table-view" id='historyTmpBox'>
                <!-- <li class="mui-table-view-cell">秋裤
                    <span class="mui-badge mui-badge-primary">11</span>
                </li>
                <li class="mui-table-view-cell">丝袜奶茶
                    <span class="mui-badge mui-badge-success">22</span>
                </li> -->
                <!-- <li class="mui-table-view-cell">奶茶妹妹
                    <span class="mui-badge">33</span>
                </li> -->
            </ul>

        </div>


    </div>



    <script src="./static/js/template/template-web.js"></script>

    <script type="html/text" id='historyTmp'>

        {{each  subjects  item index}}
       <li class="mui-table-view-cell">
           {{item.name}}
                    <span class="mui-badge   {{index%2==0 ? 'mui-badge-primary':'mui-badge-success'}}" >
                        {{item.did}}
                    </span>
                </li>

        {{/each}}      
    </script>


    <script type="html/text" id='hotSearchTmp'>
        {{each  subjects  item index}}

                <li>
                    <a href="./productdetail.html?did={{item.did}}">
                        <span  dataId="{{item.did}}">{{item.name}}</span>
                    </a>
                </li>
                {{/each}}

    </script>




    <script>

        $(function () {

            var getSeach = window.location.search.substr(1)  //"keyword=11111"

            var arr = getSeach.split('=')
            var obj = {}
            obj[arr[0]] = decodeURI(arr[1])
            console.log(obj)
            //热门搜索 hotSearch   

            //  subjects": [
            //         {
            //             "did": "3",
            //             "name": "【小米椒爆炒小公鸡】",
            //             "price": "32.00",
            //             "img_sm": "p8489.jpg",
            //             "img_lg": "p8489-l.jpg",
            //             "detail": "算起来有一个星期没有更新了，忙着赶紧完成手头的工作，和孩子一起开启度假模式。我总是毫不避讳地称自己为吃货，对于我来说，度假中缺少美食是万万不可的。想要找一个风景与美食兼顾的度假地点可不太容易，工作之余忙着查路线，查攻略，总算是定好了目的地。其实我这个嗜辣族最想去的还是成都重庆一带，考虑到季节的原因，还是留到冬天再前往吧。今天上一道火辣辣的小米椒爆炒小公鸡，虽在家中，也是十足的过了把食辣的瘾，不擅吃辣的伙伴们做这道菜的时候可要记得减少辣椒的用量哦。",
            //             "material": "三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"
            //         },

            $.ajax({
                url: 'http://mengtion.vip/kfl-api/api/searchval.php',
                type: 'post',
                dataType: 'json',
                data: obj,
                success: function (res) {
                    console.log(res)
                    if (res.code == '1003') {
                        console.log(res.msg)
                    } else {
                        var hotSearchHTML = template('hotSearchTmp', res)

                        console.log(hotSearchHTML)

                        $('.hotSearchULBox').html(hotSearchHTML)


                    }

                }


            })




            //历史搜索
            $.ajax({
                url: 'http://mengtion.vip/kfl-api/api/getproduct.php',
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    console.log(res)

                    var histroryHTMl = template('historyTmp', res)
                    console.log(histroryHTMl)

                    $('#historyTmpBox').html(histroryHTMl)


                }
            })

        })
    </script>

</body>

</html>